<template>
  <div>
    <div class="box">
      <div class="arrow">
        <img src="https://sucai.suoluomei.cn/sucai_zs/images/20191107114906-sjt.png" alt="">
      </div>
    </div>
    <!-- 方法一-----消耗性能 -->
    <div class="control" style="overflow: hidden;width: 80%;margin: 0 auto;">
      <a-row type="flex" class="lpl-ul" :gutter="[30, 30]" style="flex-flow: nowrap;position: relative;height: 200px;">
        <a-col v-for="(item) in list" :key="item.id" class="lpll-item" style="position: absolute;">
          <div class="list2">
            <img class="img" :src="item.image" alt="" />
            <div>{{ item.title }}</div>
          </div>
        </a-col>
      </a-row>
    </div>
    <!-- 方法二 -->
    <div class="wrap">
      <ul class="list">
        <li v-for="(item) in list" :key="item.id" class="one-item">
          <div class="list2">
            <img class="img" :src="item.image" alt="" />
            <div>{{ item.title }}</div>
          </div>
        </li>
        <li v-for="(item) in list" :key="item.id" class="one-item">
          <div class="list2">
            <img class="img" :src="item.image" alt="" />
            <div>{{ item.title }}</div>
          </div>
        </li>
      </ul>
    </div>
  </div>
</template>

<script lang="ts">
import { onMounted, onBeforeUnmount, reactive } from 'vue'
export default {
  setup () {
    const list = [
      {
        id: 1,
        title: '传统外贸',
        image: require('@/assets/logo.png')
      }, {
        id: 2,
        title: '跨境电商',
        image: require('@/assets/logo.png')
      }, {
        id: 3,
        title: '全球海淘',
        image: require('@/assets/logo.png')
      }, {
        id: 4,
        title: '游戏娱乐',
        image: require('@/assets/logo.png')
      }, {
        id: 5,
        title: '留学开销',
        image: require('@/assets/logo.png')
      }, {
        id: 6,
        title: '软件开发',
        image: require('@/assets/logo.png')
      }, {
        id: 7,
        title: '礼品卡定制',
        image: require('@/assets/logo.png')
      }, {
        id: 8,
        title: '全球广告营销',
        image: require('@/assets/logo.png')
      }, {
        id: 9,
        title: '全球航旅预订',
        image: require('@/assets/logo.png')
      }, {
        id: 10,
        title: '海外物流仓储',
        image: require('@/assets/logo.png')
      }, {
        id: 11,
        title: '全球资产配置',
        image: require('@/assets/logo.png')
      }
    ]
    let prizeTimer: any = null
    const scrollAnimate = (val: any) => {
      clearInterval(prizeTimer)
      // const tag:any = document.getElementsByClassName('lpl-ul')[0];
      const item1 = document.getElementsByClassName('lpll-item')[0] as HTMLDivElement
      let lis: any = document.getElementsByClassName('lpll-item')
      const width = item1.offsetWidth
      lis = Array.from(lis)
      lis.forEach((s: {left: number; style: { transform: string; }; }, i: number) => {
        s.style.transform = `translateX(${i * width}px)`
        // eslint-disable-next-line no-return-assign
        return s.left = i * width
      })
      prizeTimer = setInterval(() => {
        lis.forEach((item: {left: number; style: { transform: string; }; }, index:number) => {
          item.left = item.left - 1
          if (item.left === (-width)) {
            item.left = (list.length - 1) * (width)
          }
          item.style.transform = `translateX(${item.left}px)`
        })
      }, 30)
    }
    onMounted(() => {
      scrollAnimate(list)
    })
    onBeforeUnmount(() => {
      clearInterval(prizeTimer)
      prizeTimer = null
    })
    const fontSize = reactive({ default: '32px', small: '20px', large: '48px' });
    return {
      list,
      scrollAnimate,
      fontSize
    }
  }
}
</script>

<style lang="less" scoped>
.box {
  width: 50px;
  height: 50px;
  position: relative;
}

.arrow {
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translate(-50%, -50%);
  animation-name: beat;
  /*动画名称*/
  animation-duration: .5s;
  /*设置秒数*/
  animation-timing-function: linear;
  /*速度曲线*/
  animation-iteration-count: infinite;
  /*播放次数*/
  animation-direction: alternate;
  /*逆向播放*/
  animation-play-state: running;
  /*正在运行*/
}

@keyframes beat {
  0% {
      bottom: 0;
  }
  100% {
      bottom: -8px;
  }
}

.arrow img {
  width: 30px;
}
.list2 {
  background: rgba(255, 255, 255, 0.12);
  border-radius: 20px;
  width: 200px;
  height: 200px;
  text-align: center;
  // font-size: 20px;
  padding-top: 20%;
  font-size: v-bind('fontSize.default');
  .img {
    height: 82px;
    margin: 0 auto 5px;
    display: block;
  }
}

@item-space: 30px;
@item-width: 230px;
@item-num: 11;
@start-position: -0;
@end-position: -0 - @item-num*@item-width;

@keyframes move {
  0% {
    transform: translateX(0);
  }

  100% {
    transform: translateX(@end-position);
  }
}

.wrap {
  position: relative;
  width: 800px;
  height: 360px;
  border-radius: 6px;
  margin:0 auto;
  overflow: hidden;
}

.list {
  list-style-type: none;
  margin: 0;
  padding-top: 15px;
  padding-left: 0;
  animation: 25s move infinite linear;
  white-space: nowrap;

  .one-item {
    width: @item-width;
    height: 200px;
    display: inline-block;
    overflow: hidden;
    padding-right: @item-space;
  }
}

// 通过计算出来的偏移值才能做到无缝

@keyframes reverseMove {
  0% {
    transform: translateX(@end-position);
  }

  100% {
    transform: translateX(@start-position);
  }
}
</style>
